<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>函数形式的写法</title>
</head>
<body>
<div id="app">
    <H1>姓：{{ familyName }}</H1>
    <H1>名：{{ givenName }}</H1>

    <!--中文和英文只是会有一些差别：前后顺序和空格-->
    <!--英文使用空格进行分词，中文需要人自己分-->
    <h1>姓名：{{ familyName }} {{ givenName }}</h1>

    <!--在模板插值语法中，如果想要获得函数的返回值，需要在函数的名后面加上(), 即调用函数-->
    <h1>姓名：{{ fullName }}</h1>

    <!--同一个函数在使用的过程中多次被调用——重复调用-->
    <div>{{ fullName }}</div>
    <div>{{ fullName }}</div>
    <div>{{ fullName }}</div>
    <div>{{ fullName }}</div>

</div>

<script type="module">
    import {createApp, ref, computed} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let familyName = ref("kevin")
                let givenName = ref("abcque")

                // 计算属性
                // 从形式上看，类似于变量
                // 在使用过程中，和函数区别在于：函数每次调用都会执行一次函数体，计算属性只有在值变化的时候才会执行。
                // 如果计算属性的值存在，就会直接使用，直到其值需要发生变化。相当于缓存
                let fullName = computed(
                    () => {
                        console.log("调用了 full Name");
                        return familyName.value + " " + givenName.value
                    }
                )

                return {
                    familyName, givenName,
                    fullName
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>